(function( $, undefined ) {

$.widget("ui.ajajform_repeater",$.ui.ajajform_widget, {
	options: {
		// \type cssclass
		cssclass: "afw-repeater",
		items: [],
		values: [],
		label: "",
		width: null,
		htmltemplate: '<div class="af-label"></div><div class="af-repeater-items"></div><div class="af-error"></div><div class="af-buttons"><div class="af-button af-button-add"></div><div class="af-label"></div><div style="clear: both;"></div></div>',
		readonly: false
	},
	i18n: {
	},

	/**
	 * Creates everything, called on construction
	 */
	_create: function() {
		this.value_ids=[];
		this.next_id=1;
		this.element.addClass(this.options.cssclass);
		this.element.append(this.options.htmltemplate);
		this.refreshLabel();
		this.refreshWidth();
		var t=this;	
		$(".af-button-add",this.element).bind("click",function() {t.addButtonClicked();});
		this.refreshValues();
		this.refreshReadonly();
	},

	/**
	 *
	 */
	refreshReadonly: function() {
		if (this.options.readonly) this.element.addClass("afw-repeater-read-only"); else  this.element.removeClass("afw-repeater-read-only");
	},

	/**
	 *
	 */
	addButtonClicked: function() {
		if (this.options.readonly) return;
		this.options.values.push({});
		this.renderValue(this.options.values.length-1);
	},

	/**
	 * 
	 */
	getForm: function() {
		// TODO TODO
		return frm;
	},

	/**
	 * 
	 */
	deleteButtonClicked: function(id) {
		if (this.options.readonly) return;
		var i=-1;
		for (var j=0;j<this.value_ids.length;j++) if (this.value_ids[j]==id) i=j;
		if (i==-1) return;

		var form=this.getForm();
		// remove widgets
		for (var i=0;i<this.options.items.length;i++) {
			var inp=this.options.items[i];
			var name=inp.name.replace(/XXX/,id);
			frm.ajajform("deleteWidget",name);
		}

		// Remove item div
		$(".af-repeater-items > .af-repeater-item-"+id,this.element).remove();

		this.options.values.splice(i,1);	
		this.value_ids.splice(i,1);
	},

	/**
	 *
	 */
	renderValue: function(i) {
		var t=this;
		if (!this.value_ids[i]) {
			this.value_ids[i]=this.next_id;
			this.next_id++;
		}
		var id=this.value_ids[i];
		var v=this.options.values[i];
		console.log({id:id,v:v,i:i});
		if ($(".af-repeater-items > .af-repeater-item-"+id,this.element).length) {
			// exists
		} else {
			// Add div
			var div=$("<div class='af-repeater-item af-repeater-item-"+id+"'><div class='af-repeater-widgets'></div><div class='af-button af-button-delete'></div><div class='cl'></div></div>");
			$(".af-repeater-items",this.element).append(div);
			$(".af-button-delete",div).bind("click",function() { t.deleteButtonClicked(id); });
			$("> .af-repeater-widgets",div).width(this.options.width);
			// Add widgets

			var form=this.getForm();

			for (var i=0;i<this.options.items.length;i++) {
				var inpsrc=this.options.items[i];
				var inp={};
				for (var k in inpsrc) inp[k]=inpsrc[k];
				inp.name=inp.name.replace(/XXX/,id);
				switch(inp.type) {
					case "bigformsfk":
						inp.value=v[inpsrc.name.replace(/^.*XXX_/,"")];
//						inp.config=v[inpsrc.name.replace(/^.*XXX_/,"")+"_config"];
						break;
					default:
						inp.value=v[inpsrc.name.replace(/^.*XXX_/,"")];
				}
				form.ajajform("insertWidget","#"+this.element.attr("id")+" .af-repeater-item-"+id+" .af-repeater-widgets",null,inp);
			}
		}
	},

	/**
	 *
	 */
	refreshValues: function() {
		// remove all old values

		for (var i=0;i<this.options.values.length;i++) this.renderValue(i);//this.options.values[i]);
	},
	
	/**
	 *
	 */
	refreshWidth: function() {
		this.element.width(this.options.width+20);
//		$(".af-value",this.element).width(this.options.width-19);
//		$(".af-value2",this.element).width(this.options.width-19);
	},
	
	/**
	 *
	 */
	refreshLabel: function() {
		$(".af-label",this.element).text(this.options.label);
	},
	postvalue: function(r) {
		var arr=[];
		var t=this;
		for (var i=0;i<this.options.values.length;i++) {
			var v=this.options.values[i];
			arr.push({id:v.id,prefix:this.options.name+this.value_ids[i]+"_"});
		}
		r[this.options.name]=JSON.stringify(arr);
	}
});

})( jQuery );

